import { tenantDrandService, TenantDrandUpdateDTO, TenantDrandVO } from '@/services/TenantDrandService'
import { ProColumns } from '@ant-design/pro-components'
import { EditableProTable } from '@ant-design/pro-table'
import { Button } from 'antd'
import { observer } from 'mobx-react-lite'

const columns: ProColumns<TenantDrandVO>[] = [
  { title: '品牌id', dataIndex: 'id', hideInTable: true },
  { title: '品牌名称', dataIndex: 'brandName' },
  {
    title: '操作',
    valueType: 'option',
    render: (text, record, _, action) => [
      <Button key={record.id} type="link" onClick={() => action?.startEditable?.(record.id)}>
        编辑
      </Button>,
    ],
  },
]
const TenantBrandSetting = () => {
  return (
    <>
      <EditableProTable<TenantDrandVO>
        rowKey="id"
        columns={columns}
        request={async () => await tenantDrandService.page({ current: 1, size: 500 })}
        recordCreatorProps={{
          record: () => ({ id: `-${Math.random().toFixed(0)}`, brandName: '' }),
          creatorButtonText: '增加品牌',
        }}
        editable={{
          onSave: async (key: any, record: TenantDrandUpdateDTO) => {
            if (record.id?.startsWith('-')) {
              let resp = await tenantDrandService.save(record)
              record.id = resp.id
              return true
            }
            let resp = await tenantDrandService.update(record)
            record.id = resp.id
            return true
          },
          onDelete: async (key: any) => {
            await tenantDrandService.removeById([key])
          },
        }}
      />
    </>
  )
}

export default observer(TenantBrandSetting)
